<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8' />
    <link href='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/timeline@4.3.0/main.min.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/resource-timeline@4.3.0/main.min.css' rel='stylesheet' />
    <script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>
    <script src="https://unpkg.com/@fullcalendar/core@4.4.0/locales-all.js"></script>     
    <script src='https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/timeline@4.3.0/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/resource-common@4.3.1/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/resource-timeline@4.3.0/main.min.js'></script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            //设置产品密钥不设置左下角会出现链接
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            //'interaction'：拖动事件
            plugins: ['interaction', 'resourceTimeline','dayGrid'],
            //设置utc时间格式
            //timeZone: 'UTC',
            selectable: true,
            //设置默认显示年resourceTimelineDay,月resourceTimelineWeek,日resourceTimelineMonth
            defaultView: 'resourceTimelineDay',
            //设置中文
            locale: 'zh-cn',
            //设置日历高度
            height: 500,
            //设置初始年月
            //defaultDate: '2019-06-12',
            editable: true,
            //切换年月按钮
            header: {
                //左边按钮
                left: 'prev,next today',
                center: 'title',
                //控制年月日
                right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
            },
            eventClick(calEvent, jsEvent, view) {
                alert("点击日程触发");
                console.log(calEvent);
            },
            resourceLabelText: '计划',
            resources: [{
                    id: "a",
                    title: "计划 A"
                },
                {
                    id: "b",
                    title: "计划 B",
                    eventColor: "green"
                },
                {
                    id: "c",
                    title: "计划 C",
                    eventColor: "orange"
                },
                {
                    id: "d",
                    title: "计划 D",
                    children: [{
                            id: "d1",
                            title: "计划 D1"
                        },
                        {
                            id: "d2",
                            title: "计划 D2"
                        }
                    ]
                },
            ],
            //events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline',
            // events: [{
            //     //设置resources对应的id
            //     resourceId: "a",
            //     title: '15号-20号',
            //     //设置开始时间
            //     start: "2020-04-22 08:00",
            //     //结束时间
            //     end: "2020-04-22 11:30",
            //     //颜色
            //     color: "#409EFF",
            // }, {
            //     resourceId: "c",
            //     title: '15号-20号',
            //     start: "2020-04-22 13:00",
            //     end: "2020-04-22 18:00",
            //     color: "#42b197",
            // }],
            events:[{"resourceId":"d","title":"event 1","start":"2020-04-22","end":"2020-04-24"},{"resourceId":"c","title":"event 3","start":"2020-04-23T12:00:00+00:00","end":"2020-04-24T06:00:00+00:00"},{"resourceId":"f","title":"event 4","start":"2020-04-23T07:30:00+00:00","end":"2020-04-23T09:30:00+00:00"},{"resourceId":"b","title":"event 5","start":"2020-04-23T10:00:00+00:00","end":"2020-04-23T15:00:00+00:00"},{"resourceId":"e","title":"event 2","start":"2020-04-23T09:00:00+00:00","end":"2020-04-23T14:00:00+00:00"}],
            select: function(info) {
                console.log(info)
            },
        });
        calendar.render();
    });
    </script>
</head>

<body>
    <div id='calendar' style="width:1400px;"></div>
</body>

</html>